<template>
  <section class="sec" v-if="systemStyle.frontStyle!==4">
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="注册新账号" name="common"></el-tab-pane>
      <el-tab-pane label="绑定已有账号" name="login"></el-tab-pane>
    </el-tabs>
    <el-form ref="form" :rules="formRules" :model="form" label-width="100px">
      <div v-if="activeName === 'common'">
        <el-form-item label="登录名" prop="login">
          <el-input
            v-model="form.login"
            placeholder="您的登录名"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="默认密码">
          <div>123123</div>
        </el-form-item>
        <el-form-item label="上级编号">
          <el-input
            v-model="form.parentID"
            placeholder="没有可不填"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </div>
      <div v-if="activeName === 'login'">
        <el-form-item label="登录名" prop="login">
          <el-input
            v-model="form.xlogin"
            placeholder="请输入登录名"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            placeholder="请输入登录密码"
            type="password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </div>
      <div class="submit">
        <el-button type="primary" @click="submitForm()">{{
          activeName === 'common' ? '注册并绑定' : '绑定账户'
        }}</el-button>
      </div>
    </el-form>
  </section>
  <div class="login-container common-container" v-else>
    <div class="login-formbox" id="Jbindselect" >
      <div class="">
        <a href="/">
          <!--          logo-->
          <img :src="site2.logo" alt="网站logo图片" title="" class="common-logoimg login-logoimg">
        </a>
      </div>	<br>
      <h6 class="loginbind-title">首次登录绑定选择</h6>
      <div class="logininfo-item" style="margin-bottom: 0;">
        <el-form ref="form" :rules="formRules" :model="form" label-width="100px"  v-if="activeName === 'common'"  style="display: none">
          <div >
            <el-form-item label="登录名" prop="login">
              <el-input
                v-model="form.login"
                placeholder="您的登录名"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="默认密码">
              <div>123123</div>
            </el-form-item>
            <el-form-item label="上级编号">
              <el-input
                v-model="form.parentID"
                placeholder="没有可不填"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
        <button class="layui-btn layui-btn-normal layui-btn-fluid auto-create" type="button" @click="submitForm()">新用户，自动创建一个账号</button>

      </div>
      <div class="loginway-tips" style=" font-size: 12px;">自动创建一个用户名，初始登录和交易密码为123123</div>
      <div class="logininfo-item">
        <button class="layui-btn layui-btn-normal layui-btn-fluid bind_old" type="button" @click="login()">老用户，立即绑定一个账号</button>
      </div>
    </div>

    <div class="login-formbox" id="Jbindold" v-if="activeName === 'login'" >
      <h6   class="loginbind-title">第三方登录账号绑定</h6>
      <el-form ref="form" :rules="formRules" :model="form" label-width="100px">
        <div  >
          <el-form-item label="登录名" prop="login">
            <el-input
              v-model="form.xlogin"
              placeholder="请输入登录名"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="form.password"
              placeholder="请输入登录密码"
              type="password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
        <div class="logininfo-item">
          <el-button type="primary" @click="submitForm()" >{{
              activeName === 'common' ? '注册并绑定' : '绑定账户'
            }}</el-button>
        </div>
      </el-form>
    </div>
  </div>

</template>

<script>
import regMixin from '@/mixins/register'
import {detectBroswer, randomString} from '@/common/utils'
import { mapState } from 'vuex'
import getPlatform from "@/common/platform";

export default {
  layout: ({ req, store, app }) => {
    // console.log("系统风格")
    // console.log("2"+store.state.systemStyle)
    // console.log("3"+store.state.systemStyle.frontStyle===4)
    // store.state.systemStyle.frontStyle=4
    // alert(store.state.systemStyle.frontStyle)

    if (store.state.systemStyle.frontStyle===4)
      return 'themes'
    else
      return 'web'
  },
  // layout: 'themes',

  mixins: [regMixin],
  data() {
    return {
      site2:{},
    }
  },
  async created() {
    const res2 =  this.$axios.get('/site/siteExtend/getSiteExtend').then((res) => {
      if (res.code === 1001) {
        console.log(res.body)
        this.site2=res.body;
      }}
    )
    this.formRules.userName = null
    this.form.login = randomString(10)
  },

  methods: {
    login(){
      this.activeName="login";
    },
    submitForm() {
      if (
        this.activeName === 'login' &&
        (this.form.xlogin.length < 4 || this.form.xlogin.length > 20)
      ) {
        return this.$message.error('登录名长度在4到20个字符')
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.doRegister()
        }
      })
    },
    async doRegister() {
      if (this.activeName === 'common') {
        const { openid, tk, auth } = this.$route.query
        const res = await this.$axios.post(
          `${location.origin}/web-api/third-register`,
          null,
          {
            params: { ...this.form, openid, tk, auth }
          }
        )
        if (res.code === 1001) {
          this.$message.success('注册成功，即将跳转')
          if(this.systemStyle.goPage == null || this.systemStyle.goPage == 0){
             this.$router.push('/main')
          }else{
             this.$router.push('/category-list')
          }
          // location.href = '/main'
        }
      } else if (this.activeName === 'login') {
        const { openid, tk, auth } = this.$route.query
        const res = await this.$axios.post(
          `${location.origin}/web-api/third-bind`,
          null,
          {
            params: {
              login: this.form.xlogin,
              password: this.form.password,
              openid,
              tk,
              auth
            }
          }
        )
        if (res.code === 1001) {
          this.$message.success('绑定成功，即将跳转')
          if(this.systemStyle.goPage == null || this.systemStyle.goPage == 0){
             this.$router.push('/main')
          }else{
             this.$router.push('/category-list')
          }
          // location.href = '/main'
        }
      }
    }
  },
  computed: {
    ...mapState({
      systemStyle: (state) => state.systemStyle
    })
  }
}
</script>

<style lang="scss" scoped>
section {
  width: 800px;
  padding: 40px 0;
  margin: 0 auto;
  position: relative;
  .go-login {
    position: absolute;
    right: 0;
    top: -150px;
    font-size: 16px;
    color: $--gray-text-color;
  }
  .el-tabs--top {
    text-align: center;
    height: 54px;
    ::v-deep .el-tabs__header {
      display: inline-block;
      .el-tabs__item {
        min-width: 150px;
      }
    }
  }
  .el-form {
    width: 480px;
    padding-right: 25px;
    margin: 0 auto;
    padding-top: 20px;
    .el-form-item {
      margin-bottom: 30px;
      &.phone-validate {
        .el-input {
          width: 200px;
        }
        .el-button {
          float: right;
        }
      }
    }
    .submit {
      padding-left: 32px;
      .el-button {
        width: 100%;
      }
    }
  }
}
@import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style10/common.css';
@import 'element-ui/lib/theme-chalk/index.css';
@import 'assets/style/style10/style.css';
</style>
